﻿@{
    Layout = null;

    var pageModel = ViewBag.pageModel as NB.MGJ.Model.AntiFake.AntiFake_PageCreate;
    var type = ViewBag.type;
    var code = ViewBag.code;
    var codeStatus=ViewBag.codeStatus;

    var Fw_CodeSecret= ViewBag.Fw_CodeSecret;

    var ActivityModel=ViewBag.ActivityModel as NB.MGJ.Model.Marketing_Activity;
}

<link href="~/Content/CommonCss/BootStrap/bootstrap.css" rel="stylesheet" />
<link href="~/Content/HomePage/swiper.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>@pageModel.Title</title>
<style>
    body {
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        /*min-height: 615px;*/
    }

    #TopSwpier {
        height: 200px;
    }

    #icon img {
        display: block;
        height: 45px;
        width: 45px;
        margin: 0 auto;
    }

    #icon span {
        display: flex;
        justify-content: center;
        margin-top: 5px;
    }

    .space-between {
        display: flex;
        justify-content: space-between;
    }

    #CodeSearch, #icon {
        margin-top: 20px;
    }

    .col-xs-6, .col-xs-9 {
        padding: 0;
    }

    .icon1 {
        width: 25%;
        color: black;
    }

    .icon2 {
        width: 25%;
        color: white;
    }

    .icon1.active {
        color: #28A4DA;
    }

    .icon2.active {
        color: #2ACCA1;
    }

    /*.iconCilck.active:nth-child(2)
    {
        color: #28A4DA;
    }

    .iconCilck.active:nth-child(3)
    {
        color: #85BF3F;
    }

    .iconCilck.active:nth-child(4)
    {
        color: #F4A93B;
    }*/

    .templet2defaultWordColor {
        color: white;
    }

    .display_none {
        display: none;
    }

    #DragImg {
        position: absolute;
        z-index: 9;
    }

    #RichText {
        margin-top: 20px;
        width: 100%;
        /*display: flex;
        justify-content: center;
        align-items: center;*/
    }

    footer {
    color: #999;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-left: -20px;
    bottom: 1%;
    position: absolute;
    }

    .activity_con {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: #232121;
        background:rgba(25, 24, 24, 0.8);
        align-items: center;
        justify-content: center;
        display: flex;
    }
    .getaward,.FWAward{
        position:relative;

    }

 

    .activity_con a img {
        display: block;
        width: 80%;
        margin:0 auto;
    }
      .activity_con .FWAward img {
        display: block;
        width: 92%;
        margin:0 auto;
    }

       .getaward_date{
    position: absolute;
    top: 25%;
    color: red;
    text-align: center;
    width:100%;
        }
       .FWAward_input{
     position: absolute;
    top: 55%;
    color: red;
    left: 15%;
    text-align: center;
    width:70%;
       }
       .FWAward_submit{
            position: absolute;
            bottom:5%;
            left: 40%;
            text-align: center;
          
       }

    .countTime {
        background:rgba(216, 214, 214, 0.5);
        border-radius: 82%;
        position: absolute;
        right: 10px;
        top: 10px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: white;
    }

    .redicon {
    position: absolute;
    right: 5px;
    bottom: 10%;
    width: 20%;
    }
      .redicon img{
   width:100%;
    }
    .closeCon{
        position: absolute;
        bottom: 4%;
    }
        .closeCon > img{
       width:50px;
       height:50px;
    }
     
</style>


<input type="hidden" id="Fw_CodeSecret" value="@Fw_CodeSecret" />

<div class="activity_con">
    <div class="countTime">3s</div>


    <a class="getaward">
        <div class="getaward_date">@*@ActivityModel.ChangeDate ~ @ActivityModel.EndDate*@</div>
        <img src="http://shnbbucket.oss-cn-beijing.aliyuncs.com/20180123115145.png" alt="Alternate Text" />
    </a>

    <div id="FWAward" class="FWAward" style="display:none;z-index:100">
        <img src="http://shnbbucket.oss-cn-beijing.aliyuncs.com/20180126135742.png" alt="Alternate Text" />
        <div class="FWAward_input">
            <input placeholder="输入4位验证码" id="yzm" class="form-control" type="text" />
        </div>
        <div class="FWAward_submit">
            <input class="form-control" id="LingQu" type="button" value="立即领取" style=" background: #FFE21A; color: #835200;border:none" />
        </div>
    </div>


    <div class="closeCon" onclick="closeCon(event)">
        <img src="http://avrilbucket.oss-cn-beijing.aliyuncs.com/0076e1b0-c3c7-45c8-bd6a-6f708b4b06d8redPacket-051.png" alt="Alternate Text" />
    </div>
</div>

    <div style="padding: 0 20px; position: relative; height: 100%;">
        <div id="TopSwpier" class="PaddingRow" style="margin:0 -20px">
            @*<p class="pageTitle">@pageModel.Title</p>*@
            <div id="top_img" class="swiper-container" v-show="multipleImg">
                <div id="_top_img" class="swiper-wrapper">

                </div>
                <div id="btn1" class="swiper-pagination"></div>
            </div>
        </div>


        <div id="icon" class="space-between PaddingRow padding-top-15">



        </div>
        <div class="isShowHide">
            <!--防伪-->
            <div id="F_Form" class="PaddingRow padding-top-15 ">

                <div class="row" style="margin-bottom:20px;margin-top:20px">
                    <div class="col-sm-12 col-xs-12" style="position:relative">
                        <input type="text" id="Code" readonly="readonly" class="form-control" style="height:45px;" placeholder="输入防伪码">
                        <div id="SyShow" class=" col-sm-3 col-xs-3" style="height: 45px; background: rgb(238, 238, 238); text-align: center; padding: 0px; border-bottom-right-radius: 4px; border-top-right-radius: 4px; display: flex; align-items: center; justify-content: space-around; line-height: 2.45em; position: absolute; top: 0; right: 15px; border-left: 1px solid #ccc">
                            <input type="text" id="VerCode" placeholder="请输入4位验证码" class="form-control" style="height: 45px; border-bottom-right-radius: 0px !important; border-top-right-radius: 0px !important;">
                        </div>
                    </div>
                </div>

            </div>

        </div>

        @if (pageModel.TempletId == 2)
        {
            <a onclick="PageJump(this)" class="btn btn-primary" style="width: 100%; height: 45px; display: flex; justify-content: center; align-items: center; font-size: 16px; background: #28A4DA;border:none ">查&nbsp;询</a>
        }
        else
        {
            <a onclick="PageJump(this)" class="btn btn-primary" style="width: 100%; height: 45px; display: flex; justify-content: center; align-items: center; font-size: 16px; background: #2ACCA1; border: none;">查&nbsp;询</a>
        }






        <div id="RichText">
            <div id="RichTextChild">
                @Html.Raw(@pageModel.MainContent)
            </div>
        </div>



        <footer>技术支持：码管家云系统&nbsp;版权所有</footer>
        <input type="hidden" id="LbtJson" value="@pageModel.LbtJson" />

        <a class="redicon">
            <img src="http://shnbbucket.oss-cn-beijing.aliyuncs.com/20180123133632.png" alt="Alternate Text" />
        </a>
    </div>
    <input type="hidden" id="TempletId" value="@pageModel.TempletId" />

@*<script src="~/Scripts/jquery.js"></script>*@
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/Home/swiper.js"></script>
<script src="~/Scripts/MGJJS/TraceSource/PageOperation/jquery.qrcode.min.js"></script>
<script>

    var x = 0;
    var type = "@type";
    var code = "@code";
    var searchType = "@type";
    var moduleId = "@pageModel.ID";
    var PicShowType = "@pageModel.PicShowType";

    var codeStatus = "@ViewBag.codeStatus";

    var IsActivity = "@ViewBag.IsActivity";

    var Fw_CodeSecret = $("#Fw_CodeSecret").val();

    var setTime = '';

    $(document).ready(function () {
        $("#Code").val(code);
        GetButtonList(moduleId);
        BindLunBoTu();
        BindDragModel();
        Bindtype(type);
        CheckCodeStats(codeStatus);

        var IsHaveActivity = IsActivity==1 ? true : false;
        ActivityIniti(IsHaveActivity);

    });


    function CheckCodeStats(codeStatus) {
        if (codeStatus == 2) {

            alert("该产品已被召回，请找就近经销商进行召回操作");
        }

    }




    function ActivityIniti(IsHaveActivity) {

        if (codeStatus == 2) {

            return;
        }
        

        if (IsHaveActivity) {
            $('.activity_con .getaward').show();
            $('.redicon').show();
            var countTime = 2;
            setTime= setInterval(function () {
                if (countTime >= 0) {
                    $('.countTime').text(countTime + 's');
                }
                else {
                    clearInterval(setTime);
                    $('.activity_con').fadeOut();
                    $('.countTime').remove();
                    return;
                }
                countTime--;
            }, 1000)

        } else {
            $('.activity_con').hide();
            $(".redicon").hide();
        }

    }

    function closeCon(event) {
        $('.activity_con').fadeOut();
        clearInterval(setTime);
        $('.countTime').remove();
        event.stopPropagation();
    }


    $('.getaward').click(function () {
        if (type == "Fw_CodeSecret") {
            $(".getaward").hide();
            window.location.href = "http://www.m12315.com/app/wx?fwcode=" + Fw_CodeSecret;
        } else {
            $("#FWAward").show();
            $(".getaward").hide();
            //JumpActivity();
        }
        clearInterval(setTime);
        $('.countTime').remove();

     
    });
    $(".redicon").click(function () {
        if (type == "Fw_CodeSecret") {
            $(".activity_con .getaward").hide();
            window.location.href = "http://www.m12315.com/app/wx?fwcode=" + Fw_CodeSecret;
        } else {
            $(".activity_con").show();
            $(".activity_con #FWAward").show();
            $(".activity_con .getaward").hide();

            //JumpActivity();
        }

 
    });


    $("#LingQu").click(function () {


        JumpActivity();


    });

    function JumpActivity() {


        var yzm = $("#yzm").val();
        if (yzm != "") {

            if (yzm.length == 4) {

                $.ajax({
                    url: "/CodeSearch/ValidateCodeLastFour",
                    type: "POST",
                    dataType: "json",
                    data: { code: code, verCode: yzm },
                    success: function (data) {
                        if (data) {
                            window.location.href="http://www.m12315.com/app/index?fwcode=" + Fw_CodeSecret;
                        } else {
                            alert("验证码错误")
                        }
                    }
                });
            } else {
                alert("验证码格式不正确")
            }
        }
        else {
            alert("验证码不能为空")
        }



    }

    function Bindtype(type) {

        if (type = "Fw_Code") {
            $("#VerCodeWrap").hide();
            $("#SyShow").hide();
        }
        if (type == "Fw_CodeSecret") {
            $("#VerCodeWrap").show();
            $("#SyShow").show()
        }
    }



    function PageJump(_this) {
        var code = $("#Code").val();
        var verCode = $("#VerCode").val();

        if (type == "Fw_Code") {

            if (searchType == "Fw_Code") {
                window.location.href = "/CodeSearch/AntifakeSearchResult?code=" + code + "&searchType=" + searchType + "&verCode=" + verCode;
                return;
            }
            if (verCode != "") {
                //if ($("input[type='text']").eq(1).val() != "" && $("input[type='text']").eq(1).val().length == 4) {
                if (verCode.length == 4) {

                    $.ajax({
                        url: "/CodeSearch/ValidateCodeLastFour",
                        type: "POST",
                        dataType: "json",
                        data: { code: code, verCode: verCode },
                        success: function (data) {
                            if (data) {
                                window.location.href = "/CodeSearch/AntifakeSearchResult?code=" + code + "&searchType=" + searchType + "&verCode=" + verCode;
                            } else {
                                alert("验证码错误")
                            }
                        }
                    });
                } else {
                    alert("验证码格式不正确")
                }
            }
            else {
                alert("验证码不能为空")
            }
        }
        if (type == "Fw_CodeSecret") {
            $(_this).attr("href", "/CodeSearch/AntifakeSearchResult?code=" + code + "&searchType=" + searchType + "&verCode=" + verCode)
        }
    }


    function BindDragModel() {

        var DragImgModel = function () {
            this.width = 0;
            this.height = 0;
            this.left = 0;
            this.top = 0;
            this.src = "default";
        }

        var DragImg = new DragImgModel()
        DragImg.width = "@pageModel.DragImgwidth";
        DragImg.height = "@pageModel.DragImgheight";
        DragImg.left = "@pageModel.DragImgleft";
        DragImg.top = "@pageModel.DragImgtop";
        DragImg.src = "@pageModel.DragImgSrc";


        var $DragImgHmtl = "<img id='DragImg' />"


        $("body").append($DragImgHmtl).css("background-image", "url('" + "@pageModel.BackgroundImg" + "')")
        $("#DragImg").css({ "width": DragImg.width, "height": DragImg.height, "left": DragImg.left, "top": DragImg.top }).attr("src", DragImg.src)

        if (PicShowType == 0) {
            $("#DragImg").hide();
            $("#top_img").show();
        } else {
            $("#DragImg").show();
            $("#top_img").hide();
        }

    }


    function BindLunBoTu() {

        var lbtJson = $("#LbtJson").val();
        if (lbtJson != "") {

            var array = JSON.parse(lbtJson);
            for (var i = 0; i < array.length; i++) {
                var HtmlLbt = ['<img class="swiper-slide addSwpierImg swiper-slide-active" src="' + array[i] + '" style="width: 100%;">'].join("");
                $("#_top_img").append(HtmlLbt);
            }
        }



        var myswiper1 = new Swiper('#top_img', {
            autoplayDisableOnInteraction: false,
            //width: window.innerWidth,
            pagination: '.swiper-pagination',
            paginationClickable: true,
            loop: true,
            autoplay: 3000,
        });

    }



    function OriginsButtonClick(type) {

        searchType = "Fw_Code";
        if (type = "Fw_Code") {
            $("#VerCodeWrap").hide();
            $("#SyShow").hide();

        }
    }

    function AntifakeButtonClick(type) {
        searchType = "Fw_CodeSecret";
        if (type == "Fw_Code") {
            $("#VerCodeWrap").show();
            $("#SyShow").show()
        }
    }




    function ButtonClick(obj) {

        $(obj).addClass("active").siblings().removeClass("active");

        var Link = $(obj).attr("data-Link");
        var BindValue = $(obj).attr("data-BindValue");
        if (Link == 0) {
            AntifakeButtonClick(type);
            //防伪;
        }
        if (Link == 1) {
            //溯源
            OriginsButtonClick(type)
        }
        if (Link == 2) {
            //连接
            window.open("http://" + BindValue);
        }
        if (Link == 3) {
            //认证
            var url = "/MaterialPreview/AuthPreview?authId=" + BindValue;
            window.location.href = url;
        }

    }




    function GetButtonList(moduleId) {

        $.ajax({
            url: "/CodeSearch/GetButtonList",
            type: "POST",
            data: { moduleId: moduleId },
            success: function (data) {

                var list = data;
                var html = "";
                for (var i = 0; i < list.length; i++) {

                    var activeClass = "";
                    if (type == "Fw_CodeSecret" && list[i].Link == 0) {
                        activeClass = "active";
                    }
                    else if (type == "Fw_Code" && list[i].Link == 1) {
                        activeClass = "active";
                    }

                    if ($("#TempletId").val() == 2) {

                        html += ['<div id=' + list[i].ID + ' class="icon1 iconCilck ' + activeClass + '" data-Link=' + list[i].Link + ' data-BindValue=' + list[i].BindValue + ' onclick="ButtonClick(this)" belong="F_Form" >',
                     '<img src=' + list[i].IcoUrl + ' />',
                     '<span>' + list[i].Name + '</span>',
                     '</div>'].join("");

                    } else {

                        html += ['<div id=' + list[i].ID + ' class="icon2 iconCilck ' + activeClass + '" data-Link=' + list[i].Link + ' data-BindValue=' + list[i].BindValue + ' onclick="ButtonClick(this)" belong="F_Form" >',
                     '<img src=' + list[i].IcoUrl + ' />',
                     '<span>' + list[i].Name + '</span>',
                     '</div>'].join("");
                    }
                }
                $("#icon").html(html);
            }
        });

    }





</script>

